// 导入基础库
import React, { useState } from 'react';
import { connect, history } from 'umi';
// 导入配置参数
import df from '../../../config/dataFormat';
// 导入处理函数
import com from '../../utils/common';
// 导入UI组件
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProForm from '@ant-design/pro-form';
import ff from './input_component/form_fields';
import { Button, Modal } from 'antd';
import Ups from './img/upload_img';
// 导入LESS样式
// import style from './index.less'

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const { ui, table: tb, socketio: io, dispatch: dp } = props;

  const [isModalVisible, setisModalVisible] = useState(false);

  var profile = Object.assign({}, io.profile);
  var keys = df.keys;
  // keys = keys.filter(k=>k!=='数据来源')
  // delete profile.数据来源;

  // 获取表单项
  const get_items = () => {
    const items = [];
    for (let i = 0; i < keys.length; i += 3) {
      var cit = [];
      for (let ci = 0; ci < 3; ci++) {
        var ik = keys[ci + i];
        var it = df.data_type[ik];
        if(it) cit.push(ff[it.type](ik, it.required, it.defVal, 328));
      }
      items.push(<ProForm.Group key={i}>{cit}</ProForm.Group>);
    }
    return items;
  };

  // 事件处理函数
  const onFinish = (values) => {
    var val = { ...profile, ...values };
    val['操作记录'] = `${com.get_format_date()} ${tb.user.user} 最后修改；${
      val['操作记录']
    }`;
    dp({
      type: 'socketio/emit',
      payload: { type: 'edit_profile', data: val },
    });
  };


  // 渲染UI组件------------------------------------------------
  return (
    <PageContainer
      fixedHeader
      affixProps={{ offsetTop: 48 }}
      title="编辑档案"
      extra={[
        <Button key="2" onClick={() => history.push('/profile/screen')}>
          返回列表
        </Button>,

        <Button key="3" onClick={() => history.goBack()}>
          退出编辑
        </Button>,
        <Button key="4" onClick={() => setisModalVisible(true)}>
          管理图片资料
        </Button>,
        <Button
          key="1"
          type="primary"
          onClick={() => {
            document.getElementById('edit').click();
          }}
        >
          修改数据
        </Button>,
      ]}
    >
      <ProForm
        submitter={{
          searchConfig: {
            submitText: '修改数据',
          },
          submitButtonProps: {
            id: 'edit',
          },
          resetButtonProps: {
            size: 'large',
            style: {
              display: 'none',
            },
          },
          render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
        }}
        onFinish={onFinish}
        initialValues={profile}
      >
        {get_items()}
      </ProForm>
      <Modal
        title="添加图片资料"
        width="80%"
        closable
        maskClosable
        visible={isModalVisible}
        onCancel={() => setisModalVisible(false)}
        onOk={() => setisModalVisible(false)}
      >
        <Ups ids={profile._id} />
      </Modal>
    </PageContainer>
  );
};

export default connect(({ ui, table, socketio }) => ({ ui, table, socketio }))(
  PageView,
);
